<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/detail.css">
  <style>
    .num {
      width: 73px;
      height: 73px;
      font-size: 16px;
      text-align: center;
      display: block;
      margin: 50px 0 0 0;
      font-size: 20px;
      color: #000;
    }

    .jian {
      position: absolute;
      top: 0;
      left: 82px;
    }

    .jia {
      position: absolute;
      top: 38px;
      left: 82px;
    }
  </style>
</head>

<body>
  <h1>我是一个商品详情页面</h1>

  <div class="container">

  </div>

  <script src="../tools/jquery.min.js"></script>
  <script src="../js/myAjax.js"></script>
  <script src="../js/cookie.js"></script>
  <script src="../js/tools.js"></script>
  <script>
    const urlObj = myGetUrlValObj();
    const xhr = myPromiseJQueryAjax('../server/goods_detail.php', 'post', { goods_id: urlObj.goods_id }, 'json');
    xhr.then(function (res) {
      console.log(res);
      let str = `
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">商品详细信息</h3>
        </div>
        <div class="panel-body">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="${res.goods_big_logo}" alt="...">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">${res.goods_name}</h4>
            <p>
              <i class="glyphicon glyphicon-yen"></i>
              <span>${res.goods_price}</span>
            </p>
            <div class="btn-group" role="group" aria-label="...">
              <button type="button" class="btn btn-default">XL</button>
              <button type="button" class="btn btn-default">L</button>
              <button type="button" class="btn btn-default">M</button>
              <button type="button" class="btn btn-default">S</button>
              <button type="button" class="btn btn-default">XS</button>
            </div>
            <p style="position:relative">
              <input value="1" class="num">
              <button type="button" name="-" class="jian btn btn-default">-</button>
              <button type="button" name="+" class="jia btn btn-default">+</button>
            </p>
            <p>
              <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
              <a href="javascript:;" name="cart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
            </p>
          </div>
        </div>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
          <li role="presentation"><a href="#">商品参数信息</a></li>
          <li role="presentation"><a href="#">相关商品</a></li>
        </ul>
        <div>
          ${res.goods_introduce}
        </div>
      </div>
    </div>
      
      `;


      $('.container').html(str);

      $('.container').click(function(e){
        if(e.target.getAttribute('name') === "-"){
          $('.num').val($('.num').val() - 1 < 1 ? 1 : $('.num').val() - 1);

        }else if(e.target.getAttribute('name') === "+"){
          $('.num').val($('.num').val() - 0 + 1 > res.goods_number ? res.goods_number : $('.num').val() - 0 + 1);

        }else if(e.target.getAttribute('name') === "cart"){
          const cookieObj = myGetCookie();
          if(cookieObj.login !== '1'){
            if(window.confirm('您还没有登录，点击确定跳转登录')){
              window.location.href = `./login.html?url=${window.location.href}`;
            }
            return;
          }

          let cart = localStorage.cart;
          if(cart === undefined){
            if(!($('.num').val() - 0 >= 1 && $('.num').val() - 0 <= res.goods_number)){
              window.alert('您输入的数值范围有误');
              return;
            }

            res.num = $('num').val() - 0;

            res.buy = true;

            localStorage.cart = JSON.stringify([res]);
          }else{
            cart = JSON.parse(cart);
            if(cart.length === 0){
              if(!($('.num').val() - 0 >= 1 && $('.num').val() - 0 <= res.goods_number)){
                window.alert('您输入的数值范围有误');
                return;
              }

              res.num = $('.num').val() - 0;

              res.buy = true;

              localStorage.cart = JSON.stringify([res]);
            }else{
                let bool =cart.some(function(val){
                return val.goods_id === res.goods_id;
                })
              if(bool){
                for(let i = 0;i <= cart.length - 1;i ++){
                  if(cart[i].goods_id === res.goods_id){
                    let numAdd = (cart[i].num - 0) + ($('.num').val() - 0);
                    if(!(numAdd >= 1 && numAdd <= cart[i].goods_number)){
                      window.alert('您输入的商品数据有误');
                      return;
                    }
                    cart[i].num = numAdd;
                    localStorage.cart = JSON.stringify(cart);
                  }
                }
              
              
              }else{
                  if(!($('.num').val() - 0 >= 1 && $('.num').val() - 0 <= res.goods_number)){
                    window.alert('您输入的商品数据有误');
                    return;
                  }

                  res.num = $('.num').val() - 0;
                  res.buy = true;
                  cart.unshift(res);
                  localStorage.cart = JSON.stringify(cart);
                }
            }
          }

          window.location.href = './cart.html';
        }
      })
      



    })
  </script>

</body>

</html>